---
section: Transforms
title: Skew
slug: /docs/skew/
---

# Skew

Utilities for skewing elements with transform.

<carbon-ad />

| React props     | CSS Properties         |
| --------------- | ---------------------- |
| `skewX={angle}` | `--x-skew-x: {angle};` |
| `skewY={angle}` | `--x-skew-y: {angle};` |

## Usage

Skew an element by first enabling transforms with the `transform` utility, then specifying the skew angle using the `skewX={angle}` and `skewY={angle}` utility.

```jsx preview color=amber
<>
  <template preview>
    <x.div
      display="flex"
      flexDirection={{ xs: 'column', md: 'row' }}
      justifyContent="space-around"
      spaceY={{ xs: 0, md: 12 }}
      spaceY={{ xs: 12, md: 0 }}
      my={10}
    >
      {[0, 3, 6, 12].map((angle) => (
        <x.div key={angle} w={24} h={24} bg="amber-300" borderRadius="md">
          <x.img
            h={24}
            w={24}
            transform
            skewY={angle}
            borderRadius="md"
            src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.img transform skewY={0} />
  <x.img transform skewY={3} />
  <x.img transform skewY={6} />
  <x.img transform skewY={12} />
</>
```

## Responsive

To control the skew of an element at a specific breakpoint, use responsive object notation. For example, adding the property `skewX={{ md: 3 }}` to an element would apply the `skewX={3}` utility at medium screen sizes and above.

```jsx
<x.div transform skewX={{ md: 3 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
